/* 
 * common-layout.scss
 * 用于存储客户、货主、供应商和仓库管理等页面的通用布局样式
 */

// 页面容器基础样式
.base-page-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  // 表格容器样式
  .table-container {
    margin-bottom: 20px;
    flex: 1;
  }

  // 为custom-table组件添加高度，使其能够在页面中占据剩余空间
  .custom-table-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .pagination-container {
      position: sticky;
      bottom: 0;
      right: 0;
      z-index: 10;
      background-color: #fff;
      padding: 10px 0;
      // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }
  }

  // 分页容器样式
  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }

  // 对话框通用样式
  .base-dialog {
    :deep(.el-dialog__body) {
      padding: 20px 30px;
    }

    :deep(.el-dialog__header) {
      padding: 15px 20px;
      margin-right: 0;
      border-bottom: 1px solid #eee;
    }

    :deep(.el-dialog__footer) {
      padding: 15px 20px;
      border-top: 1px solid #eee;
    }

    // 表单样式
    .base-form {
      .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
		margin-top: 20px;
        &.full-width {
          display: block;
        }

        .el-form-item {
          flex: 1;
          margin-bottom: 20px;

          :deep(.el-form-item__label) {
            font-size: 14px;
          }

          :deep(.el-input),
          :deep(.el-select) {
            width: 100%;
          }
        }

        .full-width-item {
          width: 100%;
        }
      }
    }

    // 对话框底部按钮样式
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
  }

  // 日志对话框样式
  .log-dialog {
    :deep(.el-dialog__header) {
      padding: 15px 20px;
      margin-right: 0;
      border-bottom: 1px solid #eee;
    }

    :deep(.el-dialog__body) {
      padding: 20px;
    }

    :deep(.el-dialog__footer) {
      padding: 15px 20px;
      border-top: 1px solid #eee;
    }

    :deep(.el-table) {
      margin-bottom: 10px;

      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 600;
        text-align: center;
      }

      .el-table__row td {
        padding: 8px 0;
      }
    }
  }
} 